<template>
  <div>
    <!-- 普通按钮 -->
    <button
      class="default-button"
      :disabled="disabled"
      v-if="model === 'default'"
      :style="{ width: width + 'px' }"
      :type="type"
    >
      <img v-if="src" :src="src" :style="defaultButton.imgStyle" />
      <span>{{ text }}</span>
    </button>

    <!-- 文字按钮 -->
    <button v-if="model === 'text'" class="text-button" :disabled="disabled" :type="type">
      <span>{{ text }}</span>
      <img :src="disabled ? textButton.imgPath[1] : textButton.imgPath[0]" />
    </button>
    <!-- 23 -->

    <!-- 图片按钮 -->
  </div>
</template>

<script>
  export default {
    name: 'x-button',
    props: {
      type: {
        type: String,
        default: 'button',
      },
      model: {
        // 按钮的类型
        type: String,
        // 三种按钮类型：default、text、image
        default: 'default',
      },
      text: {
        // 按钮的文字
        text: String,
        default: '添加商品',
      },
      src: {
        // 按钮的图片
        type: String,
        default: '',
      },
      disabled: {
        // 按钮是否禁用
        type: Boolean,
        default: false,
      },
      width: {
        type: Number,
        default: 300,
      },
    },
    data() {
      return {
        // 默认按钮数据
        defaultButton: {
          imgStyle: {
            marginRight: this.text ? '10px' : '0',
          },
        },
        // 文字按钮数据
        textButton: {
          imgPath: ['/images/arrow.svg', '/images/arrow-disabled.svg'],
        },
      }
    },
  }
</script>

<style lang="scss" scoped>
  @import '../config.scss';
  .default-button {
    box-sizing: border-box;
    background-color: #3f8cff;
    color: #fff;
    border: none;
    border-radius: $border-radius;
    height: 48px;
    line-height: 32px;
    font-size: 16px;
    box-shadow: 0px 6px 12px rgba(63, 140, 255, 0.42);

    &:hover {
      background-color: $hover-color;
    }

    &:active {
      background: $active-color;
    }

    &:disabled {
      background: $disabled-color;
      box-shadow: none;
    }
  }
  .text-button {
    box-sizing: border-box;
    outline: none;
    border: 0;
    height: 28px;
    padding-bottom: 5px;
    background-color: transparent;
    cursor: pointer;

    &:hover {
      border-bottom: 2px solid $hover-color;
    }

    &:active {
      border-bottom: 2px solid $active-color;
    }

    &:disabled {
      border: 0;
      span {
        color: $disabled-color;
      }
    }

    span {
      color: rgba(63, 140, 255, 1);
      font-size: 16px;
      line-height: 16px;
      margin-right: 10px;
    }
  }
</style>
